{% include 'header.html' %}
<style>
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 600px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1)
}
.card-header {
	
	background-color: #fff;
	
}
.card-body h4 {
	color: #545b62;
}
</style>
<h1>{{ title }}</h1>
<form action="/survey/submit" style="width: 600px;" method="post">
	{% csrf_token %}
	<input type="hidden" name="survey_id" value="{{ surveyID }}">
	{% for i, q in questions %}
		<h4 class="my-4">{{ i | add:1 }}. {{ q.content }}</h4>
		{% if q.questionType == 'Text' %}
    	<div class="form-group"><input class="form-control" name="{{ q.id }}" readonly="readonly" /></div>
	    {% elif q.questionType == 'LongText' %}
    	<div class="form-group"><textarea class="form-control" name="{{ q.id }}" readonly="readonly"/></textarea></div>
	    {% elif q.questionType == 'Dropdown' or q.questionType == 'Checkbox' %}
	    <div class="container d-flex justify-content-center">
	    	<div class="row">
	    		<div class="col-lg-6 mb-4">
	    			<div class="card shadow mb-4">
	    				<div class="card-header py-3">
	    					<h6 class="m-0 font-weight-bold text-primary">Statistics</h6>
	    				</div>
	    				<div class="card-body">
	    					{% for o in q.options.values %}
	    					<h4 class="small font-weight-bold">{{ o.value }} <span class="float-right">{{ o.percentage }}%</span></h4>
	    					<div class="progress mb-4">
	    						<div class="progress-bar" role="progressbar" style="width: {{ o.percentage }}%" aria-valuenow="{{ o.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
	    					</div>
	    					{% endfor %}
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>
	    {% elif q.questionType == 'Rating' %}
    	<div class="alert alert-info">Average Score: {{ q.average }}</div>
	    {% endif %}
    {% endfor %}
</form>
{% include 'footer.html' %}